<template>
  <inline-Modal
    :visible="visible"
    :title="filterTitle()"
    :showOk="false"
    @cancel="goBack()"
  >
    <a-button
      type="primary"
      class="add-btn"
      v-if="pageOperate != 3"
      :loading="submitLoading"
    >
      确定
    </a-button>
    <div class="wrap-page-container">
      <div class="item-title">设计变更信息</div>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hideRequiredMark="false"
      >
        <a-row class="a-row-container">
          <!-- 变更名称 -->
          <a-col :span="24">
            <a-form-model-item
              label="变更名称"
              :prop="isDisabled ? '' : 'name'"
            >
              <a-input
                :disabled="isDisabled"
                v-model="form.name"
                placeholder="请输入变更名称"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 变更原因 -->
          <a-col :span="24">
            <a-form-model-item
              label="变更原因"
              :prop="isDisabled ? '' : 'reason'"
            >
              <a-input
                v-model="form.reason"
                :disabled="isDisabled"
                placeholder="请输入变更原因"
                type="textarea"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 合同名称 -->
          <a-col :span="24">
            <a-form-model-item label="合同名称" prop="contractName">
              <a-select
                :disabled="isDisabled"
                v-model="form.contractName"
                placeholder="请选择合同名称"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 申请单位 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item
              label="申请单位"
              :prop="isDisabled ? '' : 'applicant'"
            >
              <a-input
                v-model="form.applicant"
                placeholder="请输入申请单位"
                allow-clear
                :disabled="isDisabled"
              />
            </a-form-model-item>
          </a-col>
          <!-- 图纸编号 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item label="图纸编号" prop="drawingNumber">
              <a-input
                :disabled="isDisabled"
                v-model="form.drawingNumber"
                placeholder="请输入图纸编号"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 施工单位/承包单位 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item
              label="施工单位/承包单位"
              :prop="isDisabled ? '' : 'constructionUnit'"
            >
              <a-input
                :disabled="isDisabled"
                v-model="form.constructionUnit"
                placeholder="请输入施工单位/承包单位"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 专业 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item
              label="专业"
              :prop="isDisabled ? '' : 'profession'"
            >
              <a-select
                v-model="form.profession"
                :disabled="isDisabled"
                placeholder="请选择专业"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 变更位置 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item label="变更位置" prop="position">
              <a-input
                :disabled="isDisabled"
                v-model="form.position"
                placeholder="请输入变更位置"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!--  变更通知单编号-->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item
              label="变更通知单编号"
              :prop="isDisabled ? '' : 'noticeNumber'"
            >
              <a-input
                :disabled="isDisabled"
                v-model="form.noticeNumber"
                placeholder="请输入变更通知单编号"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 变更分类 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item
              label="变更分类"
              :prop="isDisabled ? '' : 'changeClassification'"
            >
              <a-select
                :disabled="isDisabled"
                v-model="form.changeClassification"
                placeholder="请选择变更分类"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 变更时间 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item label="变更时间" prop="changeTime">
              <a-date-picker
                placeholder="请选择变更时间"
                style="width: 100%"
                v-model="form.changeTime"
                :showTime="true"
                format="YYYY-MM-DD HH:mm"
                valueFormat="YYYY-MM-DD HH:mm"
                :disabled="isDisabled"
              />
            </a-form-model-item>
          </a-col>
          <!-- 变更金额 -->
          <a-col :xl="8" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item label="变更金额" prop="changePrice">
              <a-input
                :disabled="isDisabled"
                v-model="form.changePrice"
                placeholder="请输入变更金额"
                allow-clear
                suffix="万元"
              />
            </a-form-model-item>
          </a-col>
          <!-- 变更依据 -->
          <a-col :span="24">
            <a-form-model-item
              label="变更依据"
              :prop="isDisabled ? '' : 'basisChange'"
            >
              <a-input
                :disabled="isDisabled"
                v-model="form.basisChange"
                placeholder="请输入变更依据"
                type="textarea"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 变更文件 -->
          <a-col :span="24">
            <a-form-model-item
              label="变更文件"
              prop="changeFiles"
              :rules="{
                required: [1, 2].includes(pageOperate) ? true : false,
                message: '请选择中标通知书',
              }"
            >
              <bjUploadFile
                :viewMode="[1, 2].includes(pageOperate) ? false : true"
                :count="20"
                v-model="form.changeFiles"
                @preview="viewFile($event)"
                @download="downloadFile($event)"
                @change="handleUpLoadFile($event)"
                :replaceFields="{
                  fileName: 'fileName',
                  fileSize: 'fileSize',
                  fileType: 'fileType',
                }"
              ></bjUploadFile>
            </a-form-model-item>
          </a-col>
          <!-- 图纸 -->
          <a-col :span="24" v-if="pageOperate == 3">
            <a-form-model-item label="图纸">
              <div class="drawing-list-container">
                <div class="tree-container">
                  <a-empty v-if="treeData.length == 0" :description="false" />
                  <a-tree
                    v-else
                    v-model="checkedKeys"
                    show-icon
                    show-line
                    :expanded-keys="expandedKeys"
                    :auto-expand-parent="autoExpandParent"
                    :selected-keys="selectedKeys"
                    :tree-data="treeData"
                    :replaceFields="{
                      children: 'children',
                      title: 'nodeName',
                      key: 'uuid',
                    }"
                    @expand="onExpand"
                    @select="onSelect"
                  >
                    <!-- 自定义图标 -->
                    <template slot="custom" slot-scope="{ expanded }">
                      <a-icon
                        :type="expanded ? 'folder-open' : 'folder'"
                        theme="filled"
                      />
                    </template>
                    <template slot="title" slot-scope="{ nodeName }">
                      <div class="custom-tree-title-warp">
                        <div class="title" :title="nodeName">
                          {{ nodeName }}
                        </div>
                      </div>
                    </template>
                  </a-tree>
                </div>
                <div class="table-container">
                  <div class="header-warp">
                    <a-button
                      type="primary"
                      icon="download"
                      :loading="downloadLoading"
                      :disabled="downloadLoading"
                      @click="handleDownloadZip()"
                    >
                      {{ downloadLoading ? "下载中" : "批量下载" }}
                    </a-button>
                  </div>
                  <div class="table-warp">
                    <vxe-table
                      ref="xTable"
                      align="center"
                      show-overflow
                      show-header-overflow
                      :data="tableData"
                      :column-config="{ resizable: true }"
                      size="small"
                      :loading="tableLoading"
                      height="99%"
                    >
                      <vxe-table-column
                        type="checkbox"
                        width="60"
                      ></vxe-table-column>
                      <vxe-column
                        type="seq"
                        width="80"
                        title="序号"
                      ></vxe-column>
                      <vxe-column
                        field="fileName"
                        title="文件名称"
                        align="left"
                        width="200"
                      >
                        <template #default="{ row }">
                          <div class="table-file-name">
                            <div
                              class="icon"
                              :class="[getFileIconName(row.fileName)]"
                            ></div>
                            <div class="name" @click="previewFile(row)">
                              {{ row.fileName }}
                            </div>
                          </div>
                        </template>
                      </vxe-column>
                      <vxe-column field="creator" title="上传人"> </vxe-column>
                      <vxe-column field="createTimeStr" title="上传时间">
                      </vxe-column>
                      <vxe-column
                        field="operate"
                        fixed="right"
                        width="100"
                        title="操作"
                      >
                        <template #default="{ row ,}">
                          <div class="files-icon">
                            <!-- 预览 -->
                            <a-tooltip placement="top">
                              <template slot="title">
                                预览
                              </template>
                              <a-icon type="eye" @click="previewFile(row)" />
                            </a-tooltip>
                            <!-- 下载 -->
                            <a-tooltip placement="top">
                              <template slot="title">
                                下载
                              </template>
                              <a-icon
                                type="download"
                                @click="downloadFile(row, 1)"
                              />
                            </a-tooltip>
                          </div>
                        </template>
                      </vxe-column>
                    </vxe-table>
                  </div>
                </div>
              </div>
            </a-form-model-item>
          </a-col>
          <!-- 提交人 -->
          <a-col :xl="12" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item label="提交人" prop="submitPeople">
              <a-input
                v-model="form.submitPeople"
                placeholder="请输入提交人"
                :disabled="isDisabled"
                allow-clear
              />
            </a-form-model-item>
          </a-col>
          <!-- 提交时间 -->
          <a-col :xl="12" :lg="24" :md="24" :xs="24" :sm="24">
            <a-form-model-item label="变更时间" prop="submitTime">
              <a-date-picker
                placeholder="请选择提交时间"
                style="width: 100%"
                v-model="form.submitTime"
                :showTime="true"
                format="YYYY-MM-DD HH:mm"
                valueFormat="YYYY-MM-DD HH:mm"
                :disabled="isDisabled"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="pageOperate == 4">
          <a-col :span="24">
            <div class="split-line"></div>
          </a-col>
        </a-row>
        <div class="item-title" v-if="pageOperate == 4">审批信息</div>
        <a-row v-if="pageOperate == 4">
          <a-col :span="24">
            <a-form-model-item label="审批结果" prop="operate">
              <a-radio-group v-model="form.operate">
                <a-radio :value="2">
                  通过
                </a-radio>
                <a-radio :value="3">
                  驳回
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审批意见" prop="approveReason">
              <a-textarea
                placeholder="请输入"
                :rows="4"
                v-model="form.approveReason"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </inline-Modal>
</template>

<script>
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import {
  getToken,
  downloadDfs,
  downLoadBatchFileByArraybuffer,
} from "@/utils/TopVUI";
import { getFileIconName, _getUUID } from "@/utils/util.js";
//普通附件上传
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
//预览
import previewModal from "@/pages/document/minio/previewModal";
export default {
  components: {
    bjUploadFile,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //1新增 2编辑 3查看 4审批
    pageOperate: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      //表单
      isDisabled: false,
      submitLoading: false,
      form: {
        //变更名称
        name: "",
        //变更原因
        reason: "",
        //合同名称
        contractName: undefined,
        //申请单位
        applicant: "",
        //图纸编号
        drawingNumber: "",
        //施工单位
        constructionUnit: "",
        //专业
        profession: undefined,
        //变更位置
        position: "",
        //变更通知单编号
        noticeNumber: "",
        //变更分类
        changeClassification: undefined,
        //变更时间
        changeTime: "",
        //变更依据
        basisChange: "",
        //变更文件
        changeFiles: [],
        //提交人
        submitPeople: "",
        //提交时间
        submitTime: "",
        //审批结果
        operate: 2,
        //审批意见
        approveReason: "",
      },
      rules: {
        name: [{ required: true, message: "请输入变更名称", trigger: "blur" }],
        reason: [
          { required: true, message: "请输入变更原因", trigger: "blur" },
        ],
        basisChange: [
          { required: true, message: "请输入变更依据", trigger: "blur" },
        ],
        applicant: [
          { required: true, message: "请输入申请单位", trigger: "blur" },
        ],
        profession: [
          { required: true, message: "请选择专业", trigger: "change" },
        ],
        operate: [
          { required: true, message: "请选择审批结果", trigger: "change" },
        ],
        constructionUnit: [
          {
            required: true,
            message: "请输入施工单位/承包单位",
            trigger: "blur",
          },
        ],
        noticeNumber: [
          { required: true, message: "请输入变更通知单编号", trigger: "blur" },
        ],
        changeClassification: [
          { required: true, message: "请选择变更分类", trigger: "change" },
        ],
        changeTime: [
          { required: true, message: "请选择变更时间", trigger: "change" },
        ],
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
      //表格
      tableData: [
        {
          uuid: "1325C00340B44E1A908BEE6AC7541EE6",
          creatorId: "admin",
          creator: "超级管理员",
          createTime: "2024-12-28 16:21:22",
          modifierId: "admin",
          modifier: "超级管理员",
          modifyTime: "2024-12-27 15:43:57",
          creatorOrgId: 10,
          classifyId: 4389,
          fileSort: null,
          disabled: 0,
          dfsFileUuid: "3166F5B67C54480CB23736BCEF39B57F",
          dataSetId: null,
          componentId: null,
          fileName: "施工图1.dwg",
          bhFileId: "3a17193e-d312-2595-99f0-732fce8a3fdb",
          bhNodeId: "3a17193e-d2fa-5497-97b8-afc4c95732b8",
          projId: "3a14854e-8698-07a6-0369-7e2d4baef203",
          unit: "CAD_UNIT_Meter",
          versionNumber: 1,
          versionMain: 1,
          mainId: null,
          bhDataSetId: null,
          bhFileName: "20241227154321-施工图1.dwg",
          foreignKey: "99999999999999999999999999999999",
          fileCode: null,
          blobcount: 1,
          fileInfo: {
            uuid: "3166F5B67C54480CB23736BCEF39B57F",
            creatorId: "admin",
            creator: "超级管理员",
            createTime: "2024-12-27 15:43:22",
            modifierId: null,
            modifier: null,
            modifyTime: null,
            creatorOrgId: 10,
            fileName: "施工图1.dwg",
            fileSize: "20B",
            remark: "施工图1.dwg",
            url:
              "http://192.168.31.34:9000/yx-cloud-vue/20241227154321-施工图1.dwg",
            puuid: null,
            version: "1",
            tenantUuid: null,
          },
          startTime: null,
          endTime: null,
          id: null,
          pid: null,
          nodeName: null,
          previewWay: "cad",
          classfyIds: null,
          type: null,
          createTimeStr: "2024-12-28 16:21",
          subNodes: null,
          nodeId: null,
          commentUsersName: null,
        },
      ],
      tableLoading: false,
      pager: {
        page: 1,
        pageSize: 999,
        total: 0,
      },
      //图纸
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [
        {
          scopedSlots: {
            icon: "custom",
          },
          uuid: "FA42612EBC494AC0A85EF65069E4E9F2",
          creatorId: "admin",
          creator: "超级管理员",
          createTime: "2024-12-26 17:31:10",
          modifierId: null,
          modifier: null,
          modifyTime: null,
          creatorOrgId: 10,
          nodeSort: 1,
          type: 13,
          disabled: false,
          nodeName: "设计变更",
          proCode: "XM_TEMPLATE",
          pid: 0,
          id: 3892,
          delBtn: 1,
          versionNumber: null,
          versionMain: 1,
          foreignKey: "99999999999999999999999999999999",
          totype: 0,
          children: [
            {
              scopedSlots: {
                icon: "custom",
              },
              uuid: "9968FC1E171D4CC3819FAEADBF14C106",
              creatorId: "admin",
              creator: "超级管理员",
              createTime: "2024-12-26 17:31:10",
              modifierId: null,
              modifier: null,
              modifyTime: null,
              creatorOrgId: 10,
              nodeSort: 1,
              type: 13,
              disabled: false,
              nodeName: "测试变更文件同步主版本(变更通知单编号1)",
              proCode: "XM_TEMPLATE",
              pid: 3892,
              id: 3893,
              delBtn: 1,
              versionNumber: null,
              versionMain: 1,
              foreignKey: "99999999999999999999999999999999",
              totype: 0,
              children: [],
              zipBtn: false,
              uploadBtn: false,
            },
          ],
          zipBtn: false,
          uploadBtn: false,
        },
      ],
      downloadLoading: false,
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  methods: {
    //下载压缩包
    handleDownloadZip() {
      let { uuid, nodeName } = this.currentTreeNode;
      this.downloadLoading = true;
      axios
        .post(
          `/probusiness/projectInitiationFile/exportZip?treeUuid=${uuid}`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
            apiType: "file",
            responseType: "arraybuffer",
          }
        )
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, nodeName + ".zip");
        })
        .catch()
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //文件预览
    previewFile(row) {
      let { previewWay, uuid, fileInfo, unit, bhDataSetId } = row;
      let { fileName } = fileInfo;
      let domain = location.origin;
      switch (previewWay) {
        //cad预览
        case "cad":
          window.open(
            `${domain}/#/blackHole/previewCad?uuid=${uuid}&fileName=${fileName}&unit=${unit}`
          );
          return;
        // 模型预览
        case "model":
          bhDataSetId &&
            window.open(
              `${domain}/#/blackHole/viewDataSetSingleSimple?dataSetId=${bhDataSetId}&name=${fileName}`
            );
          return;
        // 普通文件预览
        case "kkview":
          this.viewFile(fileInfo);
          return;
        default:
          break;
      }
    },

    //监听树形选择
    onSelect(selectedKeys, info) {
      let { uuid } = info.node.dataRef;
      this.currentTreeNode = info.node.dataRef;
      this.selectedKeys = [uuid];
      //   this.getTableData();
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //下载
    downloadFile(row, type) {
      let { url, fileInfo } = row;
      //引用文件
      if (type == 1) {
        // 创建一个<a>元素
        const link = document.createElement("a");
        // 设置文件的URL
        link.href = fileInfo.url;
        // 设置下载后的文件名
        link.download = fileInfo.fileName;
        // 将<a>元素添加到页面中
        document.body.appendChild(link);
        // 模拟点击<a>元素
        link.click();
        // 移除<a>元素
        document.body.removeChild(link);
      }
      //交底记录、图纸
      else {
        downloadDfs(url);
      }
    },

    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },

    //上传附件
    handleUpLoadFile({ file, index }) {
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      this.$set(this.form.changeFiles[index], "loading", true);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.$set(
            this.form.changeFiles[index],
            "dfsFileUuid",
            res.dfsFileUuid
          );
          this.$set(this.form.changeFiles[index], "url", res.url);
        })
        .catch((_) => {
          this.$set(this.form.changeFiles[index], "fail", true);
        })
        .finally((_) => {
          this.$set(this.form.changeFiles[index], "loading", false);
        });
    },

    filterTitle() {
      let { pageOperate } = this;
      switch (pageOperate) {
        case 1:
          this.isDisabled = false;
          return "新增";
        case 2:
          this.isDisabled = false;
          return "编辑";
        case 3:
          this.isDisabled = true;
          return "查看";
        case 4:
          this.isDisabled = true;
          return "审批";
        default:
          break;
      }
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    async goBack() {
      await this.$emit("update:visible", false);
      this.$emit("close");
    },

    getFileIconName,
  },
};
</script>

<style lang="less" scoped>
.modal-full-layout {
  /deep/.main {
    padding: 10px 24px;
  }
  .add-btn {
    position: absolute;
    top: 10px;
    right: 90px;
  }
  .item-title {
    padding: 0 0 20px 8px;
    font-size: 16px;
    color: #333;
  }
  .split-line {
    height: 1px;
    background: #d9d9d9;
    margin-bottom: 20px;
  }
  /deep/.a-row-container {
    padding-right: 70px;
  }
  /deep/.bj-upload-file {
    .choosed-file-warp {
      width: 100%;
    }
  }
  /deep/.ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 140px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      overflow: hidden;
    }
  }
  .drawing-list-container {
    height: 562px;
    display: flex;
    overflow: hidden;
    .tree-container {
      width: 300px;
      height: 100%;
      border: 1px solid #d4d7d8;
      border-radius: 4px;
      margin-right: 10px;
      flex-shrink: 0;
      background: #fff;
      overflow: auto;
      overflow-x: hidden;
      position: relative;
      padding: 0 10px 10px 10px;
      box-sizing: border-box;
      /deep/.ant-tree {
        li {
          width: 100%;
          .ant-tree-node-content-wrapper {
            position: relative;
            width: calc(100% - 25px);
            padding: 0;
            .ant-tree-iconEle {
              color: #ffca28;
              font-size: 16px;
            }
            .ant-tree-title {
              overflow: hidden;
              display: inline-block;
              width: calc(100% - 26px);
              .custom-tree-title-warp {
                display: flex;
                width: 100%;
                .title {
                  flex: 1;
                  overflow: hidden;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .operate {
                  flex-shrink: 0;
                  color: #8c8c8c;
                  .anticon {
                    display: none;
                    margin-right: 8px;
                    &:last-of-type {
                      margin-right: 0;
                    }
                  }
                  .add-file-button {
                    font-size: 15px;
                  }
                }
              }
            }
          }
        }
      }
      .ant-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .table-container {
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .header-warp {
        display: flex;
        height: 48px;
        flex-shrink: 0;
      }
      .table-warp {
        flex: 1;
        overflow: hidden;
        .files-icon {
          .anticon {
            cursor: pointer;
            font-size: 18px;
            color: #1677ff;
            margin-right: 16px;
            &:last-of-type {
              margin-right: 0;
            }
          }
          .anticon-download {
            color: #239b53;
          }
          .anticon-delete {
            color: #e43d3d;
          }
        }
      }
    }
  }
  .submit-btn {
    position: absolute;
    top: 10px;
    right: 90px;
  }
  .wrap-page-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
  }
}
</style>
